<template name="contacts">
    <!-- this should show a list of your contacts/friends -->
    <!-- new contacts can be added via the add contact button in the upper rigth corner -->
    <!-- friend requests are shown at the top in a separate list -->
    {{#if ready}}
        {{#if friendRequests}}
            <div class="list-heading">Friend Requests</div>
            {{#each friendRequests}}
                {{>friendRequestItem}}
            {{/each}}
        {{/if}}
        {{#if contacts}}
            <div class="list-heading">Contacts</div>
            {{#each contacts}}
                {{> contactsListItem}}
            {{/each}}
        {{else}}
            {{#unless friendRequests}}
                <div class="no-content">
                    <p>You have no contacts yet</p>
                </div>
            {{/unless}}
        {{/if}}
    {{else}}
        <div class="main-loading">
            {{> loading size="small"}}
        </div>
    {{/if}}
    <div class="fixed-action-btn">
        <div class="btn-floating btn-large waves-effect" data-open-dialog data-template="addContact" data-fixedfooter="true" data-big="true">
            <i class="material-icons">person_add</i>
        </div>
    </div>
</template>
